<template>
  <div class="contain">
    <div id="viewDiv2" ></div>
      <div class="title">
        <div class="d-flex" style="padding-top: 70px; width: 980px">
          <img
            :src="back"
            alt=""
            style="width: 26px; height: 26px; margin-top: 20px"
          />
          <div class="title_back" @click="projectFunc().goback" >返回</div>
        </div>

        <div class="title_text"><div>地下空间一张图</div></div>
        <div class="title_time">
          <div
            style="
            margin-left: 200px;
              font-size: 20px;
              font-family: 'OPPOSans';
              color: rgba(230, 253, 255, 0.5);
            "
          >
            <!-- 查询内容： -->
          </div>
          <div style="border: #5CE1FF solid 1px; border-radius: 20px;background-color: rgba(20,67,81,0.9);;">
            <!-- <el-input
              v-model="searchValue"
              class=" m-1"
              size="small"
              placeholder="请输入"
            >
            <i slot="prefix" class="el-icon-user" @click="test"></i>
              <i slot="prefix" >
                <img
                  style="width: 16px; height: 16px"
                  src="../assets/image/underGround/back.png"
                />
              </i>
            </el-input> -->
            
          </div>
          <div
            style="
              font-size: 32px;
              font-family: 'OPPOSans';
              font-weight: bold;
              color: #e6fdff;
            "
          >
            {{ nowdate }}
          </div>
          <div style="font-size: 28px; font-family: 'OPPOSans'; color: #e6fdff">
            {{ nowTime }}
          </div>

          <div style="font-size: 28px; font-family: 'OPPOSans'; color: #e6fdff">
            | {{ weekday }}
          </div>
        </div>
        <div></div>
      </div>
      <!-- 左图表 -->
      <div class="other">
        <modelTemplete class="w-100 h-100">
          <template #top style="left: 0px">
            <component :is="calcComponent(1)"></component>
          </template>
          <template #middle>
            <component :is="calcComponent(2)"></component>
          </template>
          <template #bottom>
            <component :is="calcComponent(3)"></component>
          </template>
        </modelTemplete>
      </div>
      <!-- 右图表 -->
      <div class="other" style="right: 0px">
        <modelTemplete>
          <template #top>
            <component :is="calcComponent(4)"></component>
          </template>
          <template #middle>
            <component :is="calcComponent(5)"></component>
          </template>
          <template #bottom>
            <component :is="calcComponent(6)"></component>
          </template>
        </modelTemplete>
      </div>
      <!-- 图例 -->
      <div class="label">
       <div v-for="(item,index) in labelList" class="label_item"  @click="labelList[index].show=!labelList[index].show,useFunc().controlByType(item.text,item.show)" >
        <div style="width: 80px;height: 50px;padding: 5px 20px 5px 20px;" >
          <img  style="width: 40px;height: 40px" :src="item.img" alt="">

        </div>
        <div :class="{ 'label_text': item.show, 'label_textActive': !item.show }"
        >{{item.text}}</div>
       </div>
      </div>
      <!-- 模糊 -->
      <div class="map-overlay"></div>
      <!-- 下方导航 -->

    <div class="bottomNav"></div>
    <div class="bottomitem">
      <div
          v-for="(item, index) in navList"
          @click="
          (activeNav = item),
            (activeItem = index),
            navCilck(index),
            closeClick()
        "
          style="width: 8%; display: flex; justify-content: space-around"
      >
        <div>
          <div
              :style="{ background: `url(${item.bk}) no-repeat center center`, backgroundSize: 'auto 70px'}"
              :class="activeItem == index ? 'itemActive' : 'itemUnActive'"
          ></div>
          <div :class="activeItem == index ? 'Activetext' : 'UnActivetext'">
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
      <div class="state" id="stateShow">
        <div class="box">
          <div class="box-wrap">
            <div class="poptitle">
              <div class="poptitle_text" id="title"></div>
              <div class="clopoptitle_close" @click="closeClick()">X</div>
            </div>
            <div class="content">
              <div class="popInfo">
                <div class="pop_distribute"></div>
                <div class="pop_value"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { projectFunc } from "@/hook/projectFunc";
import { useStore } from "vuex";
import modelTemplete from "@/components/project/modelTemplete.vue";
import back from "@/assets/image/underGround/back.png";
import zhgl_gx from "@/assets/image/underGround/zhgl_gx.png";
import zhgl_length from "@/assets/image/underGround/zhgl_length.png";

import zhgl_1 from "../views/undergrond/jsc/zhgl_1/zhgl_1.vue";
import zhgl_2 from "../views/undergrond/jsc/zhgl_2/zhgl_2.vue";
import fjsrfgc from "../views/undergrond/jsc/fjsrfgc/fjsrfgc.vue";
import gwgx from "./undergrond/jsc/gwgx/gwgx.vue";
import gwgx_1 from './undergrond/jsc/gwgx_1/gwgx_1.vue';
import dxtcc from './undergrond/jsc/dxtcc/dxtcc.vue'

import glgxgjgl from "./undergrond/glgx/glgxgjgl/glgxgjgl.vue";
import glgxyjgl from "./undergrond/glgx/glgxyjgl/glgxyjgl.vue";
import glgxzcgl from "./undergrond/glgx/glgxzcgl/glgxzcgl.vue";
import glwbgl from "./undergrond/glgx/glwbgl/glwbgl.vue";
import glxjgl from "./undergrond/glgx/glxjgl/glxjgl.vue";
import glxmgl from "./undergrond/glgx/glxmgl/glxmgl.vue";


import { useFunc } from "@/hook/useFunc";
import axios from "axios";

import Epsg4548TilingScheme from "@/utils/epsgTanselayte.js";
import API from "@/network/api";
import _ from "lodash";
import { W3d } from "@/assets/test/W3d";
import { number } from "echarts";
import { useFields } from "@/hook/useFields";

import pointPic from "@/assets/image/underGround/point.png";

import subway from "@/assets/image/underGround/subway.png";
import gl from "@/assets/image/underGround/gl.png";
import sb from "@/assets/image/underGround/sb.png";
import pork from "@/assets/image/underGround/pork.png";
import sb_jg from "@/assets/image/underGround/sb_jg.png";
import sb_psg from "@/assets/image/underGround/sb_psg.png";
import sb_yld from "@/assets/image/underGround/sb_yld.png";

import jsc_icon from "@/assets/image/underGround/jsc_icon.png";
import glgx_icon from "@/assets/image/underGround/glgx_icon.png";

const searchValue = ref();
const labelList=ref([
  {
    img:sb_yld,
    text:"易涝点",
    show:false
  },
  {
    img:sb_psg,
    text:"排水管",
    show:false
  },
  {
    img:sb_jg,
    text:"井盖",
    show:false
  },
  {
    img:gl,
    text:"管廊",
    show:false
  },
  {
    img:sb,
    text:"设备",
    show:false
  },
  {
    img:pork,
    text:"停车场",
    show:false
  },
])
const formateDate = () => {
  let now1 = new Date();
  var hours = now1.getHours().toString().padStart(2, '0'); // 获取小时并确保是两位数
  var minutes = now1.getMinutes().toString().padStart(2, '0'); // 获取分钟并确保是两位数
  var seconds = now1.getSeconds().toString().padStart(2, '0'); // 获取秒钟并确保是两位数
  return hours + ":" + minutes + ":" + seconds;
};
// 格式化日期时间
const nowdate = ref("");
// var nowTime = hours + ":" + minutes + ":" + seconds;
const nowTime = ref("");
const weekday = ref("");
var weekdays = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];
const router = useRouter();
const store = useStore();
const w3d = new W3d();
let viewer = w3d.View;
let projectInfo: Map<string, any> = new Map<string, any>();
projectInfo.set("pipeGalaryName", "管廊名称");
projectInfo.set("length", "管廊长度");
projectInfo.set("material", "管廊材质");
projectInfo.set("constructionMethod", "施工方法");
projectInfo.set("onwerShipUnit", "权属单位");
projectInfo.set("constructionUnit", "施工单位");
projectInfo.set("surperviceUnit", "监理单位");
projectInfo.set("startTime", "开工时间");
projectInfo.set("endTime", "竣工时间");
projectInfo.set("status", "状态");
const openPop = ref(false);
let entyImgMap: Map<string, any> = new Map<string, any>();
entyImgMap.set("工程", zhgl_gx);
entyImgMap.set("设施", zhgl_length);

const navList = [
  {
    title: "驾驶舱",
    componentList: [zhgl_1, zhgl_2, fjsrfgc, gwgx, gwgx_1, dxtcc],
    bk: jsc_icon,
  },
  {
    title: "管廊管线",
    componentList: [glgxzcgl, glxmgl, glwbgl, glxjgl, glgxgjgl, glgxyjgl],
    bk: glgx_icon,
  }
];
const activeItem = ref(0);
const activeNav: any = shallowRef(navList[0]);


const VITE_APP_jsonUrl = import.meta.env.VITE_APP_jsonUrl;
let jsonData = ref({})
function getJsonData(){
  axios.get(VITE_APP_jsonUrl).then(res => {
    jsonData.value = res.data
  })
}

provide('jsonData', jsonData)
getJsonData()

const navCilck = (index: number) => {
  // labelList.value[index].map((item: any) => {
  //   item.show = true;
  // });
  // console.log("切换");
  getJsonData()
};

const closeClick = () => {
  openPop.value = false;
  (document.getElementById as any)("stateShow").style.display = "none";
  console.log(
    (document.getElementById as any)("stateShow").style.display,
    "sndjksnk"
  );
};
onMounted(async () => {
  apiTest();
  (document.getElementById as any)("stateShow").style.display = "none";
  setInterval(() => {
    nowTime.value = formateDate();
    var now = new Date();
    var year = now.getFullYear(); // 获取年份
    var month = now.getMonth() + 1; // 获取月份，月份是从0开始的，所以需要+1
    var day = now.getDate(); // 获取日
    nowdate.value = year + "-" + month + "-" + day;
    weekday.value = weekdays[now.getDay()];
  });
  console.log('onMounted');

  useFunc().createMap('underGround').then(()=>{
    console.log(useFunc().scenceList,'underGroundScenceList');
    useFunc().addpoint('underGround').then(()=>{
    
    })
  })

});
const apiTest=async()=>{
// let res=await API.drillHole.list({
//         pageNumber:1,
//         pageSize: 9999
// })
// let res=await API.map.ParkingList({
//         pageNumber:1,
//         pageSize: 9999
// })
// console.log(res,'sdsd');

}
const calcComponent = (num: number) => {
  return (activeNav.value.componentList as any)[num - 1];
};
</script>

<style scoped lang="scss">
.label{
  position: absolute;
  width: 200px;
  height: 260px;
  bottom: 50px;
  left: 4800px;
  border-radius: 5px;
  z-index: 3;
  background-color: #032332;
  &_item{
    display: flex;

  }
  &_text{
    font-size: 20px;
    color: aqua;
    text-align: center;
    line-height: 50px;
  }
  &_textActive{
    font-size: 20px;
    color: #fff;

    text-align: center;
    line-height: 50px;
  }
}
.hidden-style {
color: aqua;
}
.contain {
  width: 7072px;
  height: 1560px;
  overflow: hidden;

}

#cesiumContainer {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
}
.map-overlay{
  width: 100%;
  height: 100%;
  left: 0;
  background: url('../assets/image/underground/bk_all.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 2;
  pointer-events: none;

}
.title {
  top: -7px;
  width: 100%;
  height: 140px;
  background: url("../assets/image/underground/bigTitle.png");
  background-size: 100% 100%;
  padding-left: 80px;
  background-repeat: no-repeat;
  position: absolute;
  display: flex;
  z-index: 4;
  &_back {
    height: 46px;
    font-size: 26px;
    font-family: "OPPOSans";
    color: #03e6fe;
    margin-bottom: auto;
      margin-top: auto;
  }
  &_text {
    margin: auto;
    text-align: center;
    color: #fff;
    font-family: "旁门正道";
    font-size: 76px;
  }
  &_time {
    width: 1000px;
    text-align: center;
    color: #fff;
    display: flex;
    div {
      margin-bottom: auto;
      margin-top: auto;
      margin-left: 20px;
    }
  }
}
#viewDiv2 {
  width: 7072px;
  height: 1560px;
  // z-index: 1;
  position: absolute;
}
.other {
  // margin-top: 160px;
  // margin-bottom:88px;
  width: 2000px;
  height: 100%;
  background-color: #032332;
  //  height: 1312px;
  position: absolute;
  z-index: 3;
  padding: 160px 0 0 0;
}

// .map-overlay {
//   height: 100%;
//   position: absolute; /* 或者 'fixed'，取决于地图容器的布局方式 */
//   top: 0;
//   right: 2000px;
//   bottom: 0;
//   left: 2000px;
//   z-index: 3;
//   background: radial-gradient(
//     ellipse at center,
//     transparent 70%,
//     /* 从中心到60%的位置是完全透明的 */ rgba(3, 35, 50, 0) 75%,
//     /* 从60%到70%开始逐渐添加颜色，但仍然保持透明 */ rgba(3, 35, 50, 0.6) 80%,
//     /* 在90%的位置颜色变得更深，透明度降低 */ #0f1a1f 100%
//       /* 在100%的位置，即边缘，颜色完全变为#032332 */
//   );
//   // backdrop-filter: blur(10px); /* 应用模糊效果 */
//   pointer-events: none; /* 确保点击事件可以穿透这个元素到达底下的地图 */
// }
.state {
  width: 500px;
  position: absolute;
  background-color: rgba(4, 55, 61, 0.5);
  z-index: 1;
}
.poptitle {
  width: 100%;
  height: 50px;
  display: flex;
  font-size: 26px;
  color: rgba(255, 255, 255, 1);
  background: linear-gradient(
    to right,
    rgba(92, 225, 255, 1) 0%,
    rgba(92, 225, 255, 0) 100%
  );
  font-family: "优设标题黑";
  line-height: 50px;
  &_text {
    width: 90%;
    padding-left: 20px;
  }
}
.bottomNav {
  width: 3000px;
  height: 80px;
  position: absolute;
  bottom: 0;
  left: calc(50% - 1500px);
  background: url("../assets/image/underGround/bar_bk.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.bottomitem {
  width: 3000px;
  height: 160px;
  position: absolute;
  bottom: 0;
  left: calc(50% - 1500px);
  z-index: 2;
  display: flex;
  justify-content: center;
}

.itemActive {
  height: 50%;
  width: 150px;
  background-repeat: no-repeat;
  background-position: center; /* 背景图片居中显示 */
}
.Activetext {
  color: #5ce1ff;
  text-align: center;
  font-family: "旁门正道";
}
.UnActivetext {
  text-align: center;

  font-family: "旁门正道";
  color: rgba(166, 218, 223, 0.5); /* 选中时的字体颜色 */
}
.itemUnActive {
  margin-top: 40px;
  width: 150px;
  height: 50%;
  background-repeat: no-repeat;
  background-position: center; /* 背景图片居中显示 */
}

</style>
